<template>
  <div class="manage">
    <n-flex
      justify="space-between"
      align="center"
      class="manage-top"
    >
      <n-flex
        align="center"
        :size="8"
      >
        <n-icon
          :component="FunnelOutline"
          color="#999"
        />
        <span style="color: #999">过滤</span>
        <n-divider vertical />
      </n-flex>
      <n-flex align="center">
        <n-input
          placeholder="请输入账单名称"
          size="small"
          style="width: 200px"
        >
          <template #prefix>
            <n-icon :component="Search" />
          </template>
        </n-input>
        <n-divider vertical />
        <n-button
          type="primary"
          size="small"
          @click="handleAddBill"
          >添加账单</n-button
        >
      </n-flex>
    </n-flex>
    <div class="manage-container">
      <n-empty
        v-if="!billList.length"
        description="暂无账单"
      >
        <template #extra>
          <n-button size="small"> 去添加 </n-button>
        </template>
      </n-empty>
      <n-grid
        cols="2 s:3 m:4 l:5 xl:6 2xl:7"
        :x-gap="12"
        :y-gap="12"
        responsive="screen"
      >
        <n-grid-item
          v-for="(item, index) in billList"
          :key="index"
        >
          <bill-manage-item
            :id="item.id"
            :title="item.name"
            :remark="item.remark"
            :creator="true"
            :create-time="item.createTime"
            @select="handleSelect"
          />
        </n-grid-item>
      </n-grid>
    </div>
  </div>
</template>

<script lang="ts" setup>
  import { Search, FunnelOutline } from '@vicons/ionicons5'

  const router = useRouter()

  // 账单列表
  const billList = ref<any[]>([])
  //  添加账单
  function handleAddBill() {
    router.push({ path: '/bill/manage/0' })
  }

  // 获取账单列表
  function getBillList() {
    http.get('bill/manage').then(res => {
      billList.value = res.data
    })
  }

  // 选中列表
  function handleSelect(key: string, id: number) {
    switch (key) {
      case 'edit':
        router.push({ path: `/bill/manage/${id}` })
        break

      case 'delete':
        break
    }
  }
  getBillList()
</script>

<style scoped lang="scss">
  .manage {
    &-top {
      height: 48px;
      padding: 0 16px;
      background-color: #fff;
      border-radius: $radius-sm;
    }
    &-container {
      height: calc(100vh - 190px);
      padding: $space-default;
      box-sizing: border-box;
      border-radius: $radius-sm;
    }
  }
</style>
